<template>
	<view class="container">
		<u-navbar leftText="修改密码" @leftClick="appFinish" leftIconColor="#1D2129" bgColor="transparent">
		</u-navbar>

		<view class="form_container">

			<u-form ref="form" labelPosition="left" :rules="rules" :model="formData" labelWidth="1"
				:labelStyle="labelStyle">
				<view class="password-tips">
					为了您的帐号安全，验证手机号后可设置新密码，验证码将发送至 +86 {{ phoneNum.substring(0, 3) }}****{{ phoneNum.substring(7) }} 手机号
				</view>
				<template>

					<u-form-item label="" prop="verificationCode" key="verificationCode" class="custom_item">
						<u--input v-model="formData.verificationCode" placeholder="请输入验证码" border="none">
							<template slot="suffix">
								<view :class="dynamicClass" @click="sendVerificationCode">
									{{ countdown > 0 ? `重新获取 (${countdown}s)` : '获取验证码' }}
								</view>
							</template>
						</u--input>
					</u-form-item>
					<view class="divider"></view>
					<u-form-item label="" prop="newPassword" key="newPassword" class="custom_item">
						<u--input v-model="formData.newPassword" placeholder="请输入新密码" border="none"
							:type="!isShowNewPassword ? 'password' : ''">
							<template slot="suffix">
								<view class="" @click="newPasswordSwitch">
									<img v-if="isShowNewPassword" class="input-icon" src="@/static/image/open_eyes.png"
										alt="" />
									<img v-if="!isShowNewPassword" class="input-icon" src="@/static/image/close_eyes.png"
										alt="" />
								</view>
							</template>
						</u--input>

					</u-form-item>
					<view class="divider"></view>
					<u-form-item label="" prop="confirmPassword" key="confirmPassword" class="custom_item">
						<u--input v-model="formData.confirmPassword" placeholder="请再次输入新密码" border="none"
							:type="!isShowconfirmPassword ? 'password' : ''">
							<template slot="suffix">
								<view class="" @click="confirmPasswordSwitch">
									<img v-if="isShowconfirmPassword" class="input-icon" src="@/static/image/open_eyes.png"
										alt="" />
									<img v-if="!isShowconfirmPassword" class="input-icon"
										src="@/static/image/close_eyes.png" alt="" />
								</view>
							</template>
						</u--input>

					</u-form-item>
					<view class="divider"></view>

					<!-- <view class="submit-box">
						确认修改
					</view> -->
					<u-button class="submit-btn row-height" color="#295FFF" type="primary" @click="submit">确定修改</u-button>

				</template>
			</u-form>


			<u-popup :show="isShowAvatarPop" round="10" @close="closeAvatarPop" mode="bottom">
				<view class="pop-container">
					<view class="avatar-pop-box">
						<view class="pop-item" @click="choosePic(1)">
							拍照
						</view>
						<view class="pop-item" @click="choosePic(2)">
							从手机相册选择
						</view>
					</view>
					<view class="pop-cancel-item" @click="closeAvatarPop">
						取消
					</view>
				</view>
			</u-popup>

		</view>
		<view>



		</view>

	</view>
</template>

<script>
import {
	txCosUpload
} from '@/utils/txCosUpload'
export default {
	components: {},
	data() {
		return {
			countdown: 0,
			phoneNum: '',
			isShowconfirmPassword: false,
			isShowNewPassword: false,
			validateParams: {
				ticket: '',
				randStr: ''
			},

			isShowNamePop: false,
			isShowAvatarPop: false,
			isShowPhonePop: false,

			labelStyle: {
				letterSpacing: '1px',
				marginLeft: '10px',
			},
			formData: {
				verificationCode: '',
				newPassword: '',
				confirmPassword: ''
			},
			rules: {
				verificationCode: [{
					required: true,
					message: '请输入验证码',
					trigger: 'blur'
				}],
				newPassword: [{
					required: true,
					message: '请输入新密码',
					trigger: 'blur'
				}],
				confirmPassword: [{
					required: true,
					message: '请输入确认密码',
					trigger: 'blur'
				},
				{
					validator: this.checkPassword,
					trigger: 'blur'
				},
				],
			},
			uploadUrl: 'https://your-upload-url.com'
		};
	},
	computed: {
		dynamicClass() {
			return {
				'disabled-text': this.countdown > 0, // 当isActive为true时，应用active-style类的样式
				'code-text': this.countdown == 0 // 当isActive为false时，应用inactive-style类的样式
			};
		}
	},
	onLoad() {
		this.getUserInfo()
	},
	onPullDownRefresh() {
		this.getUserInfo()
	},
	methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
		goBack() {
			uni.navigateBack();
		},
		checkPassword(rule, value, callback) {
			if (value !== this.formData.newPassword) {
				callback(new Error('两次输入的密码不一致，请重新输入'));
			} else {
				callback();
			}
		},
		confirmPasswordSwitch() {
			this.isShowconfirmPassword = !this.isShowconfirmPassword
		},
		newPasswordSwitch() {
			this.isShowNewPassword = !this.isShowNewPassword
		},
		async sendVerificationCode() {
			if (this.countdown > 0) return;
			const captcha = new TencentCaptcha('192481447', (res) => {
				if (res.ret !== 0) return;
				this.validateParams.ticket = res.ticket;
				this.validateParams.randStr = res.randstr;
				this.getSms();
			});
			captcha.show(); // 显示验证码

		},
		async getSms() {
			let orgId = await this.$utils.getOrgId(this)
			const params = {
				orgId: orgId,
				mobile: this.phoneNum,
				type: 2,
				txCaptchaReq: {
					ticket: this.validateParams.ticket,
					randStr: this.validateParams.randStr
				}
			}
			const res = await this.$request(this.$Api.userSendSms, params, "post")
			if (res.data.code != 200) return
			console.log('res', res)
			this.countdown = 60;
			const interval = setInterval(() => {
				this.countdown--;
				if (this.countdown <= 0) clearInterval(interval);
			}, 1000);
		},
		submit() {
			this.$refs.form.validate().then((valid) => {
				console.log(111);
				if (valid) {
					console.log(123)
					this.updatePassword()
				}
			}).catch((e) => { });
		},
		async updatePassword() {
			this.loading = true;
			let params = {
				mobile: this.phoneNum,
				txCaptchaReq: this.validateParams,
				code: this.formData.verificationCode,
				password: this.formData.newPassword,
			}
			const res = await this.$request(this.$Api.updatePassword, params, "post")
			if (res.data.code == '200') {
				uni.showToast({
					title: '更改成功',
					icon: 'none'
				});
				this.$utils.loginOut(this)
				this.getUserInfo()
				this.countdown = 0
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			}

		},
		async getUserInfo() {
			const params = {}
			const res = await this.$request(this.$Api.getUserInfo, params, "get")
			if (res.data.code != 200) return
			console.log('res', res)
			const {
				avatar,
				nickname,
				mobile,
			} = res.data.data;
			this.phoneNum = mobile
			this.formData.avatar = avatar
			this.formData.name = nickname
			this.formData.phoneNum = mobile
			this.isShowPhonePop = false
			uni.stopPullDownRefresh()
		},
		showAvatarPop() {
			console.log('showAvatarPop')
			this.isShowAvatarPop = true
		},
		closeAvatarPop() {
			this.isShowAvatarPop = false
		},
		showPhonePop() {
			console.log('showPhonePop')

			this.$refs.bindPhonePopRef.formData.oldPhone = this.formData.phoneNum
			this.isShowPhonePop = true
		},
		closePhonePop() {
			this.isShowPhonePop = false
		},
		showNamePop() {
			console.log('showNamePop')
			this.isShowNamePop = true
		},
		closeNamePop() {
			console.log('closeNamePop')
			this.isShowNamePop = false
		},
		confirmNamePop(params) {
			this.formData.name = params
			this.isShowNamePop = false
		},

		confirmName() {
			console.log('confirmName')
			this.isShowNamePop = false
		},
		// 上传图片
		choosePic(type) {
			const vm = this
			if (type == 1) {
				this.$utils.androidCamera(this)
			} else {
				this.$utils.androidAlbum(this)
			}
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'business_avatar'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
						console.log(123, Math.round(progressData.percent * 100))
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						vm.formData.avatar = res.fileUrl
						this.isShowAvatarPop = false
					})
				}
			});
		},

		async submitForm() {
			console.log('submitForm', this.$utils);
			let orgId = await this.$utils.getOrgId(this)
			const params = {
				avatar: this.formData.avatar,
				nickname: this.formData.name,
				email: '',
				birthday: '',
				sex: 0,
				orgId: orgId,
			}
			const res = await this.$request(this.$Api.updateUserInfo, params, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '更改成功',
				icon: 'none'
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	// height: 992rpx;
	overflow-y: hidden;
	overflow: hidden;
	// position: relative;
	height: 100vh;
	background: url('@/static/image/my_set_bg.png') no-repeat center center;
	background-size: cover;
	background-color: #fafbff;


	::v-deep .u-navbar__content__left__text {
		font-weight: 500;
		font-size: 32rpx;
	}

	.avatar-form-item {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		float: right;
	}

	.avatar-box {
		width: 80rpx;
		height: 80rpx;
	}

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #F2F2F2;

		.pop-item {
			padding: 32rpx 0;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}

	.form_container {
		// background-color: red;
		margin: 32rpx;
		margin-top: 96rpx;
		border-radius: 16rpx;
		// padding-top: 32rpx;


		.divider {
			border: 1rpx solid #E3E8EE;
			margin: 30rpx 0;
		}

		.u-form {
			padding: 40rpx;
			flex: 1;
			height: 100vh;
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;

			::v-deep .u-form-item__body {
				padding: 10rpx 0;
			}

			::v-deep .u-form-item__body__left__content__required {
				left: -1px;
			}
		}


	}

	.custom_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		padding: 14rpx 32rpx;
		text-align: center;
		border: 2rpx solid #295EFF;
		border-radius: 8rpx;
		color: #295EFF;
		font-size: 28rpx;
		font-weight: 400;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}
	}

	.nav-left-text {
		color: #295FFF;
	}

	.slot-content {
		padding: 34rpx 0;
		width: 100%;
	}

	.name-input {}

}

.password-tips {
	color: #8C8C8C;
	font-size: 24rpx;
	line-height: 34rpx;
	margin-bottom: 32rpx;
}

.input-icon {
	width: 44rpx;
	height: 44rpx;
}

.code-text {
	color: #295EFF;
}

.disabled-text {
	color: #295EFF;
	opacity: 0.5;
}

.submit-btn {
	margin-top: 132rpx;
	// width: 276rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
}
</style>